<template>

  <div class="app">
    <div style="margin-left: 40px;margin-top: 20px">
      <el-form :inline="true" class="search-form">
        <el-form>
          <el-form-item label="任务编号:">
            <el-input  v-model="state.searchCriteria.rwid" placeholder="输入你查询的taskId用逗号" style="width: 200px" clearable></el-input>
          </el-form-item>
          <el-form-item label="话术模板:">
            <el-select v-model="state.searchCriteria.hsmbid" placeholder="请选择" style="width: 150px" clearable @visible-change="fetchTemplates">
              <el-option
                  v-for="item in templates"
                  :key="item.fid"
                  :label="item.name"
                  :value="item.fid">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="时间:">
            <el-date-picker
                v-model="dateTime"
                type="datetimerange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="defaultTime"
                clearable
            />
          </el-form-item>


          <el-form-item>
            <el-button type="primary" @click="load">
              <el-icon style="vertical-align: middle">
                <Search />
              </el-icon>
              <span style="vertical-align: middle">查询</span>
            </el-button>

          </el-form-item>
        </el-form>
      </el-form>

      <el-table :data="state.tableData" >
        <el-table-column
            prop="whrq"
            label="外呼日期"
            width="150px"
            sortable
            :formatter="row => new Date(row.whrq).toLocaleDateString()">
        </el-table-column>
        <el-table-column prop="xq" label="星期" width="80px" sortable></el-table-column>
        <el-table-column prop="qymc" label="企业名称" width="120px" sortable></el-table-column>
        <el-table-column prop="rwmc" label="任务名称" width="120px" ></el-table-column>
        <el-table-column prop="rwid" label="任务ID" width="80px"></el-table-column>
        <el-table-column prop="whl" label="外呼量" width="90px"></el-table-column>
        <el-table-column prop="jtl" label="接通量" width="90px"></el-table-column>
        <el-table-column prop="jtlv" label="接通率" width="90px" sortable></el-table-column>
        <el-table-column prop="abyxs" label="AB意向数" width="90px"></el-table-column>
        <el-table-column prop="abyxl" label="AB意向率" width="110px" sortable></el-table-column>
        <el-table-column prop="llczb" label="0轮次占比" width="90px"></el-table-column>
        <el-table-column prop="dy1fzzb" label=">1分钟占比" width="100px"></el-table-column>
        <el-table-column prop="aiwhjfsc" label="AI外呼计费时长" width="125px"  :formatter="row => formatDuration(row.aiwhjfsc)"></el-table-column>
        <el-table-column prop="yytzjfsc" label="语音通知计费时长" width="140px" :formatter="row => formatDuration(row.yytzjfsc)"></el-table-column>
        <el-table-column prop="rgwhjfsc" label="人工外呼计费时长" width="140px" :formatter="row => formatDuration(row.rgwhjfsc)"></el-table-column>
        <el-table-column prop="dxfsl" label="短信发送量" width="110px"></el-table-column>
        <el-table-column prop="dxfscgl" label="短信发送成功量" width="130px"></el-table-column>
        <el-table-column prop="dxfscglv" label="短信发送成功率" width="130px"></el-table-column>
      </el-table>
    </div>
  </div>


</template>

<script setup>

import {onMounted, reactive, ref, watchEffect} from "vue";
import request from "@/utils/request";


import dayjs from 'dayjs';
import duration from 'dayjs/plugin/duration';
dayjs.extend(duration);
//格式化时长
const formatDuration = (seconds) => {
  if(seconds === 0) {
    return '0';
  }
  const duration = dayjs.duration(seconds, 'seconds');

  if(duration.asDays() >= 1) {
    return duration.format('D[天] HH[时] mm[分] ss[秒]');
  }
  else if(duration.asHours() >= 1) {
    return duration.format('HH[时] mm[分] ss[秒]');
  }
  else if(duration.asMinutes() >= 1) {
    return duration.format('mm[分] ss[秒]');
  }
  else {
    return duration.format('ss[秒]');
  }
};

const state = reactive({
  searchCriteria : {
    rwid: null,
    hsmbid: null,
    qssj: null,
    jssj: null
  },
  tableData:[]
})

const dateTime = ref(null)
const defaultTime = [
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
]

//获取话术模板
let templates = ref([]);
const fetchTemplates = () => {
  request.get("/template/status").then(res => {
    templates.value = res.data
  })
}

//监听dateTime的变化
watchEffect(() => {
  if (dateTime.value) {
    state.searchCriteria.qssj = dateTime.value[0];
    state.searchCriteria.jssj = dateTime.value[1];
  } else {
    state.searchCriteria.qssj = undefined;
    state.searchCriteria.jssj = undefined;
  }
});

onMounted(() => {
  load();
});

//查询后台数据
const load = () => {
  request.post("/statistics/find",state.searchCriteria).then(res=>{
    state.tableData = res.data
    console.log(res.data)
  });
};

</script>

<style>

</style>